import React, { useState } from 'react';
import { Form, Row, Col, Input, Button,Select } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
const { Option } = Select;

const AdvancedSearchForm = () => {
  const [expand, setExpand] = useState(false);
  const [form] = Form.useForm();

  const getFields = () => {
    const count = expand ? 10 : 6;
    const children = [];
    for (let i = 0; i < count; i++) {
      children.push(
        <Col span={8} key={i}>
          <Form.Item
            name={`field-${i}`}
            label={`Field ${i}`}
            rules={[
              {
                required: false,
                message: 'Input something!',
              },
            ]}
          >
            <Input placeholder="placeholder" />
          </Form.Item>
        </Col>,
      );
    }
    return children;
  };

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
    >
      {/* <Row gutter={24}>{getFields()}</Row> */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            name='grade2'
            label={`考试名称`}
            rules={[
              {
                required: false,
                message: '请选择年级',
              },
            ]}
          >
            <Select defaultValue="1" >
              <Option value="1">2019年期中</Option>
              <Option value="2">二年级</Option>
              <Option value="3">三年级</Option>
              <Option value="4">四年级</Option>
              <Option value="5">五年级</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name='grade'
            label={`年级`}
            rules={[
              {
                required: false,
                message: '请选择年级',
              },
            ]}
          >
            <Select defaultValue="3" >
              <Option value="1">一年级</Option>
              <Option value="2">二年级</Option>
              <Option value="3">三年级</Option>
              <Option value="4">四年级</Option>
              <Option value="5">五年级</Option>
            </Select>
          </Form.Item>
        </Col>
        {/* <Col span={8}>
          <Form.Item
            name='grade'
            label={`班级`}
            rules={[
              {
                required: false,
                message: '请选择年级',
              },
            ]}
          >
            <Select defaultValue="1" >
              <Option value="1">一年级一班</Option>
              <Option value="2">二年级</Option>
              <Option value="3">三年级</Option>
              <Option value="4">四年级</Option>
              <Option value="5">五年级</Option>
            </Select>
          </Form.Item>
        </Col> */}
        <Col span={8}>
          <Form.Item
            name='grade4'
            label={`学科`}
            rules={[
              {
                required: false,
                message: '请选择年级',
              },
            ]}
          >
            <Select defaultValue="1" >
              <Option value="1">语文</Option>
              <Option value="2">二年级</Option>
              <Option value="3">三年级</Option>
              <Option value="4">四年级</Option>
              <Option value="5">五年级</Option>
            </Select>
          </Form.Item>
        </Col>
        
        {/* <Col span={8}>
          <Form.Item
            name='grade2'
            label={`学生姓名`}
            rules={[
              {
                required: false,
                message: '请选择年级',
              },
            ]}
          >
            <Input></Input>
          </Form.Item>

        </Col> */}

      </Row>


      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
          <Button
            style={{ margin: '0 8px' }}
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
          </Button>
          <a
            style={{ fontSize: 12 }}
            onClick={() => {
              setExpand(!expand);
            }}
          >
            {expand ? <UpOutlined /> : <DownOutlined />} 展开
          </a>
        </Col>
      </Row>
    </Form>
  );
};

export default AdvancedSearchForm;
